<template>
  <uni-popup id="popup2" ref="popup2" :type="type" :animation="true">
    <view class="popup-content">
      <view>
        <view class="popup-title">可选器械</view>
        <view class="popup-lists u-f-ac">
          <view :class="devicesIdArrayActive==index ? 'actives' : ''" class="popup-items u-f-ajc" v-for="(item, index) in devicesIdArray"
            :key="index" @click="emitIndex(index)">{{item.name}}</view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
  import uniPopup from "../uni-popup/uni-popup.vue"
  export default {
    components: {
      uniPopup,
    },
    props: {
      arrs: {
        type: Array,
        default () {
          return []
        }
      },
    },
    watch: {
      arrs(newVal) {
        this.devicesIdArray = newVal;
      }
    },
    data() {
      return {
        devicesIdArray: [],
        devicesIdArrayActive: -1,
        type: 'bottom',
      }
    },
    // created() {
    //   this.devicesIdArrayActive = -1
    // },
    methods: {
      toggle(type) {
        this.type = type
        this.$refs.popup2.open()
      },
      emitIndex(index) {
        this.devicesIdArrayActive = index
        this.$emit('emitIndex', this.devicesIdArrayActive)
      }
    }
  }
</script>

<style lang="scss">
  .popup-content {
    width: 100%;
    background-color: #fff;
    padding: 0 20rpx 120rpx 30rpx;

    .popup-title {
      font-size: 30rpx;
      font-weight: 600;
      padding: 26rpx 0 30rpx;
    }

    .popup-lists {
      flex-wrap: wrap;

      >view:nth-of-type(4n) {
        margin-right: 0 !important;
      }

      .popup-items {
        background-color: #F0EEF1;
        width: 23%;
        margin-right: 2.66%;
        padding: 14rpx 0;
        font-size: 20rpx;
        color: #666;
        margin-bottom: 20rpx;
      }
    }
  }

  .actives {
    background-color: $uni-color-zhuti !important;
    color: white !important;
  }
</style>
